<template>
  <div class="app-container" style="display:flex;">
    <div style="width: 75%;">
      <div class="filter-container">
        <el-tabs v-model="activeName">
          <el-tab-pane label="原始档案" name="原始档案" />
          <el-tab-pane label="档案知识图谱" name="档案知识图谱" />
        </el-tabs>
      </div>
      <div class="myTable1">
        <div v-if="activeName=='档案知识图谱'" id="main" ref="chart" style="min-height:800px; width: 100%;" />

        <div v-if="activeName=='原始档案'">
          <embed :src="pdf_url" type="application/pdf" width="100%" height="850px">
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; min-height:850px;padding: 20px 5px 0px 5px;" class="myTable1">
      <div style="font-size: 14px;font-weight: bold; line-height: 14px;">
        {{ dh }}
      </div>
      <div style="margin-top: 10px; display: flex; ">
        <div style="display: flex; align-items: center;">
          <i style="font-size: 22px; color: green" class="el-icon-circle-check" />
          <span style="color: green; margin-left: 5px;font-size: 16px;">扫描件已转换</span>
        </div>
        <div v-if="is_kag==1" style="display: flex; align-items: center; margin-left: 10px;">
          <i style="font-size: 22px; color: green" class="el-icon-circle-check" />
          <span style="color: green; margin-left: 5px;font-size: 16px;">知识已抽取</span>
        </div>

        <div v-if="is_kag == 0" style="display: flex; align-items: center; margin-left: 5px">
          <i style="font-size: 22px; color: red" class="el-icon-warning-outline" />
          <span style="color: red; margin-left: 5px;font-size: 16px;">知识待抽取</span>
        </div>

        <div v-if="audit_status == 1" style="display: flex; align-items: center; margin-left: 10px;">
          <i style="font-size: 22px; color: green" class="el-icon-circle-check" />
          <span style="color: green; margin-left: 5px;font-size: 16px;">著录已审核</span>
        </div>

        <div v-if="audit_status == 0" style="display: flex; align-items: center; margin-left: 5px">
          <i style="font-size: 22px; color: red" class="el-icon-warning-outline" />
          <span style="color: red; margin-left: 5px;font-size: 16px;">著录待审核</span>
        </div>
      </div>

      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">属性信息</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;">
          <el-table :data="tableData" border style="width: 100%; min-height: 100px;" :show-header="false"
            empty-text="可点图谱中实体加载">
            <el-table-column prop="zd" label="id" width="100">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.key }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" show-overflow-tooltip label="value">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.value }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { artApi } from '@/api/art'

export default {

  data() {
    return {
      pdf_url: "",
      activeName: "原始档案",
      content: "",
      audit_status: null,
      is_kag: null,
      dh: "",
      nodeName: "",
      type: "",
      dhtitleList: [],
      tableData: [],
      selectedNode: null,
      listLoading: false,
      listQuery: { "name": "" },
      options: {
        title: {
          text: '',
          textStyle: {
            color: 'white',
          },
          left: "0px",
          top: "0px"
        },
        tooltip: {
          show: true
        },
        legend: {
          show: true,
          data: [],
          "selectedMode": "multiple",
          "left": "10px",          // 放在左边
          "bottom": "10px",        // 放在底部
          "icon": "circle",        // 使用圆形图标
          "orient": "vertical",    // 竖着排列
          "itemWidth": 16,         // 图例项宽度（可选，根据需要调整）
          "itemHeight": 16,        // 图例项高度（可选，根据需要调整）
          "itemGap": 10
        },
        "toolbox": {
          "show": true,
          "feature": {
            "saveAsImage": {            // 下载为图片
              "name": "知识图谱",
              "type": "png",
              "backgroundColor": "#fff"
            },

            "restore": {                // 还原
              "title": "还原"
            },

          },
          "right": "10px",              // 放在右边
          "bottom": "10px",             // 放在底部
          "orient": "vertical",         // 竖着排列
          "itemGap": 10                 // 按钮之间的间距（可选，根据需要调整）
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: '80px'
        },
        series: [{
          type: "graph",
          // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          roam: true,
          // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
          focusNodeAdjacency: true,
          // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
          force: {
            // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
            // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
            repulsion: 2000,
            // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
            edgeLength: [1000, 300]
            // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
            // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10], // 分别设置起点和终点符号的大小
          lineStyle: {
            color: 'black', // 边的颜色
            width: 1,
            fontSize: 12,
            "normal": {
              "cursor": "default" // 点击边时鼠标样式为默认箭头
            }
          },
          // 图的布局。[ default: 'none' ]
          layout: "force",
          // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
          // 'circular' 采用环形布局;'force' 采用力引导布局.
          // 标记的图形
          symbol: 'circle',
          // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
          normal: {
            lineStyle: {
              // 线的颜色[ default: '#aaa' ]
              color: 'black',
              // 线宽[ default: 1 ]
              width: 1,
              // 线的类型[ default: solid实线 ]   'dashed'虚线    'dotted'
              type: 'solid',
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
              opacity: 1,
              // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
              curveness: 0.5
            }
          },
          // 关系对象上的标签
          label: {
            normal: {
              // 是否显示标签
              show: true,
              // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
              position: "bottom",
              formatter: function (params) {
                // 使用 rich text 来添加背景颜色
                return '{bg|' + params.name + '}';
              },
              rich: {
                bg: {
                  padding: [3, 5], // 调整内边距
                  borderRadius: 4, // 圆角
                  backgroundColor: '#52606d', // 背景颜色
                  borderColor: '#333', // 边框颜色
                  borderWidth: 1, // 边框宽度
                  color: '#fff' // 文字颜色
                }
              },
              // 文本样式
              textStyle: {
                fontSize: 10,
                color: 'black'
              }
            }
          },
          // 连接两个关系对象的线上的标签
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: 'black'
              },
              // 标签内容
              formatter: function (param) {
                return param.data.category;
              }
            }
          },
          data: [],
          // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
          categories: [],
          // 节点间的关系数据
          links: []

        }]
      },
      myChartzzt: null

    }
  },


  watch: {
    activeName(newVal) {
      console.log(this.options)

      this.$nextTick(() => {
        // 延迟到下次 DOM 更新后执行
        this.myChartzzt = this.$echarts.init(document.getElementById('main'));
        this.myChartzzt.setOption(this.options);
      });


    }
  },


  async mounted() {

    this.id = this.$route.query.id
    await this.getgetDetail(this.id)
    await this.handleFilter()


  },
  methods: {



    async getgetDetail(id) {

      let params = {
        id: id,
      }

      const response = await artApi("getArticleDetailsById", params)

      if (response.code == 200) {
        this.tableData = response.data.list
        this.dh = response.data.dh
        this.listQuery.name = response.data.dh
        this.is_kag = response.data.is_kag
        this.audit_status = response.data.audit_status
        this.pdf_url = response.data.pdf_url
      }

      console.log(response);

    },

    // 数据列表
    async handleFilter() {


      const response = await artApi("getEntityJson", this.listQuery)

      if (response.code == 200) {

        await this.$nextTick();


        this.options.series[0].data = response.data.data
        this.options.series[0].links = response.data.links
        this.options.series[0].categories = response.data.category

        this.options.legend.data = response.data.cate


        this.myChartzzt = this.$echarts.init(document.getElementById('main'));



        this.myChartzzt.setOption(this.options);


        // });
      } else {
        await this.$nextTick();
        this.options.series[0].data = []
        this.options.series[0].links = []
        this.options.series[0].categories = []
        this.options.legend.data = []
        this.myChartzzt = this.$echarts.init(document.getElementById('main'));
        this.myChartzzt.setOption(this.options);

        this.nodeName = ""
        this.type = ""
        this.dhtitleList = []
        this.tableData = []

      }
    },



    // 恢复所有边的颜色
    resetEdgesColor() {
      this.options.series[0].edges.forEach(edge => {
        edge.lineStyle.color = '#ccc';
      });
      this.myChartzzt.setOption(this.options);
    },

    // 高亮与指定节点相关的边
    highlightRelatedEdges(nodeName) {
      this.options.series[0].edges.forEach(edge => {
        if (edge.source === nodeName || edge.target === nodeName) {
          edge.lineStyle.color = '#000'; // 或者其他你想要的颜色
        }
      });
      this.myChartzzt.setOption(this.options);
    },
    toggleFullScreen() {
      const elem = this.$refs.chart.$el;
      if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    }


  }
}
</script>

<style lang="scss" scoped>
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

.always-underlined {
  text-decoration: underline;
}

::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

::v-deep .el-link--inner {
  font-size: 12px;
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}
</style>
